<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery/2.0.0/jquery.min.js"></script>
    <link href="../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/fetch.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <link href="../css/back/style.css" rel="stylesheet">
    <script>
        function del(e) {
            var id = $(e).attr('id');
            var page = "../admin_student_delete?id=" + id;
            if (confirm("确定要删除")==true){
                $.get(page);
                return true;
            }else
                return false;
        }
        function jump(e){
            var name = e.parentNode.className;
            console.log(name);
            if(name=="disabled" || name == "current"){
                return false;
            }
            else
                return true;
        }
    </script>
    <title>八方驾校</title>
</head>
<body>
<div id="allContent">
    <div>
        <table width="100%">
            <tbody>
            <tr height="30px">
                <td width="200px">
                    <img class="primary" title="八方驾校" src="../img/car1.png">
                    <img class="primary" title="八方驾校" src="../img/car.png">
                    <img class="primary" title="八方驾校" src="../img/car1.png">
                </td>

                <td align="left" width="240px">
                    <div class="search">
                        <form method="post">
                            <button class="btn btn-default" type="button" @click="search">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                            <input name="1" v-model="key" class="form-control" placeholder="搜索..">
                        </form>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <nav>
        <div class="nav bg-primary">
			<span class="pull-left">
                <a href="#nowhere">后台管理</a>
			</span>

        </div>
    </nav>
    <br>

    <table width="100%" class="allTable">
        <tbody>
        <tr valign="top">
            <td width="145px" style="padding-left:20px">
                <nav>
                    <div id="nav_" style="margin-left:00px;width:170px">
                        <a href="#nowhere" clicked="true"
                           class="list-group-item success_bg leftKnowledgeMenuWholeTitle">
                            <h2>所有成员</h2>
                        </a>
                        <a href="listCoach.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready">
                            <span>教练</span>
                        </a>
                        <a href="listStudent.html?schedule=1"
                           :class=" schedule==1 ? 'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready active' :
                            'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready'">
                            <span>科目一</span>
                        </a>

                        <a href="listStudent.html?schedule=2"
                           :class=" schedule==2 ? 'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready active' :
                            'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready'">
                            <span>科目二</span>
                        </a>

                        <a href="listStudent.html?schedule=3"
                           :class=" schedule==3 ? 'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready active' :
                            'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready'">
                            <span>科目三</span>
                        </a>
                        <a href="listStudent.html?schedule=4"
                           :class=" schedule==4 ? 'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready active' :
                            'leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready'">
                            <span>科目四</span>
                        </a>
                        <a href="listArticle.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready finish_ready">
                            <span>文章</span>
                        </a>
                        <a href="listExamInfo.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready">
                            <span>考试信息</span>
                        </a>
                    </div>
                </nav>
            </td>

            <td align="left" style="padding-left:60px;padding-right:40px">
                <nav>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <div class="text-uppercase">
                                <span><font color="#337ab7">总共{{page.total}}人</font></span>
                                <a class="pull-right" href="upload.html">新增学员</a>
                            </div>
                        </div>
                    </div>
                </nav>

                <div class="workingArea">

                    <div id="listDataTableDiv" class="listDataTableDiv">
                        <table class="table table-striped table-bordered table-hover  table-condensed">
                            <thead>
                            <tr class="success">
                                <th>姓名</th>
                                <th>头像</th>
                                <th>进度</th>
                                <th>电话</th>
                                <th>科二教练</th>
                                <th>科三教练</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="s in ss">
                                <td>{{s.name}}</td>
                                <td>
                                    <img v-if="s.user != null" height="50px" :src="'../img/student/'+ s.user.pic">
                                    <img v-else src="../img/default.jpg" height="50px">
                                </td>
                                <td>{{s.schedule}}</td>
                                <td>{{s.telephone}}</td>
                                <td v-if="s.coach2!=null">{{s.coach2.name}}</td>
                                <td v-else>无</td>
                                <td v-if="s.coach3!=null">{{s.coach3.name}}</td>
                                <td v-else>无</td>
                                <td>
                                    <a  :id="s.id" class="glyphicon glyphicon-trash"
                                        :href="'listStudent.html?schedule=' + schedule + '&start='+ page.start"
                                        onclick="return del(this)">
                                    <!--<span  class="glyphicon glyphicon-trash">-->
                                    <!--</span>-->
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pageDiv">
                            <nav>
                                <ul class="pagination">
                                    <li :class="page.hasPrevious ? 'w' : 'disabled' " >
                                        <a :href="'listStudent.html?start=0&schedule=' + schedule" onclick="return jump(this)">
                                            <span>&laquo;</span>
                                        </a>
                                    </li>

                                    <li :class="page.hasPrevious ? 'w' : 'disabled' " >
                                        <a :href="'listStudent.html?schedule=' + schedule + '&start='+ (page.start-page.count)" onclick="return jump(this)">
                                            <span>&lsaquo;</span>
                                        </a>
                                    </li>

                                    <li v-for="i in page.totalPage"
                                        :class="((i-1)*page.count)==page.start ? 'disabled' : 'w' ">
                                        <a v-if="i*page.count-page.start<=20 && i*page.count-page.start>=-10"
                                           :href="'listStudent.html?schedule=' + schedule + '&start=' + (i-1)*page.count"
                                           :class="(i-1)*page.count==page.start ? 'current' : 'fa' "
                                           onclick="return jump(this)">
                                            <span>{{i}}</span>
                                        </a>
                                    </li>
                                    <li :class="page.hasNext ? 'w' : 'disabled' ">
                                        <a :href="'listStudent.html?schedule=' + schedule + '&start='+ (page.start+page.count)" onclick="return jump(this)">
                                            <span>&rsaquo;</span>
                                        </a>
                                    </li>
                                    <li :class="page.hasNext ? 'w' : 'disabled' " >
                                        <a :href="'listStudent.html?schedule=' + schedule + '&start=' + page.last" onclick="return jump(this)">
                                            <span>&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>

                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="push"></div>
</div>

<div class="footer">
    <footer class="footer" id="footer">
        © 2015-2018 <a href="http://bafang.cn">bf.cn</a> — All Rights Reserved. 蜀ICP备15000533号
        <a href="#nowhere">八方后台管理系统</a>
        | <a href="#nowhere">关于本站</a>
    </footer>
</div>

<script>
    var url = "../admin_student_list";
    new Vue({
        el: '#allContent',
        data: {
            ss: [],
            page: [],
            schedule: "",
            key: []

        },
        mounted: function () {
            self = this;
            url += decodeURI(location.search);
            self.schedule=self.GetQueryString("schedule");
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.ss = jsonObject.ss; //数组
                    self.page = jsonObject.page;
                    console.log(self.ss);
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            })
        },
        methods:{
            GetQueryString:function(name){  //获取学员的进度
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                console.log(window.location.search.substr(1));
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            search: function(){
                if(this.key.length === 0){
                    return false;U
                }
                else{
                    let queryUrl  = "../admin_search?key=" + this.key + "&type=" + "学员" + "&schedule=" + this.schedule;
                    self = this;
                    axios.get(queryUrl).then(function (response) {
                        console.log(response.data);
                        self.ss = response.data.ss;
                        self.page = response.data.page;
                    })

                }
            }
        },

    });
</script>
</body>
</html>